<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf8">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
	<style>
	body{
		margin: 0px;
		padding: 0px;
	}
	#can {
		display: block;
		margin: 0 auto;
	}
	</style>
	 <script src="js/mui.min.js"></script>
	<!--<script src="js/update.js" type="text/javascript" charset="utf-8"></script> -->
</head>	
<body>
<canvas id = "can" width = "200" height = "400"></canvas>
</body>
<script>
var winHeight = document.documentElement.clientHeight;
var winWidth = document.documentElement.clientWidth;
			
var canvas = document.getElementById("can"),
		txt = canvas.getContext("2d"),		
		width = winWidth,
		height = winHeight,
		d = Math.floor(winHeight/20),
		colume = 10,
		row = 20;
canvas.width = winWidth;
canvas.height = winHeight;
txt.fillStyle = "#000";
txt.fillRect(0,0,width,height);

var type = [
	[
		[
			[1],
			[1],
			[1],
			[1]
		],
		[
			[1,1,1,1]
		]
	],

	[
		[
			[1,1],
			[1,1]
		]
	],

	[
		[
			[0,1,0],
			[1,1,1]
		],
		[
			[1,0],
			[1,1],
			[1,0]
		],
		[
			[1,1,1],
			[0,1,0]
		],
		[
			[0,1],
			[1,1],
			[0,1]
		]
	],

	[
		[
			[0,1,1],
			[1,1,0]
		],
		[
			[1,0],
			[1,1],
			[0,1]
		],
		[
			[0,1,1],
			[1,1,0]
		],
		[
			[1,0],
			[1,1],
			[0,1]
		]
	],

	[
		[
			[1,1,0],
			[0,1,1]
		],
		[
			[0,1],
			[1,1],
			[1,0]
		],
		[
			[1,1,0],
			[0,1,1]
		],
		[
			[0,1],
			[1,1],
			[1,0]
		]
	],

	[
		[
			[1,0],
			[1,0],
			[1,1]
		],
		[
			[1,1,1],
			[1,0,0]
		],
		[
			[1,1],
			[0,1],
			[0,1]
		],
		[
			[0,0,1],
			[1,1,1]
		]
	],

	[
		[
			[0,1],
			[0,1],
			[1,1]
		],
		[
			[1,0,0],
			[1,1,1]
		],
		[
			[1,1],
			[1,0],
			[1,0]
		],
		[
			[1,1,1],
			[0,0,1]
		]
	]
];

var box = [
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
];

var startTime = new Date().getTime(),
		nowTime,
		interval = 1000,
		i = Math.floor(Math.random() * type.length),
		j = Math.floor(Math.random() * type[i].length),
		obj = type[i][j],
		t = -type[i][j].length,
		l = 4;
	
requestAnimationFrame(function(){
	nowTime = new Date().getTime();
	if(nowTime - startTime >= interval){
		if(!judge(l,t + 1,obj)){
			if(t < 0){
				alert("You failed");
				return;
			}

			for(var m = 0;m < obj.length;m++){
				for(var n = 0;n < obj[m].length;n++){
					if(obj[m][n]) box[t + m][l + n] = 1;
				}
			}

			for(var m = 0;m < box.length;m++){
				var ok = true;
				for(var n = 0;n < box[m].length;n++){
					if(box[m][n] == 0) ok = false;
				}
				if(ok){
					box.splice(m,1);
					box.unshift([0,0,0,0,0,0,0,0,0,0]);
				}
			}

			i = Math.floor(Math.random() * type.length);
			j = Math.floor(Math.random() * type[i].length);
			delete obj;
			obj = type[i][j];
			l = 4;
			t = -type[i][j].length;
		}
		else{
			t += 1;
			startTime = nowTime;
			render();
		}
	}
	requestAnimationFrame(arguments.callee);
});

window.addEventListener("keydown",function(e){
	var event = e || window.event;
	switch(e.keyCode){
		case 37:
			if(judge(l - 1,t,obj)) l--;
			break;
		case 38:
			var k = type[i].length;
			while(k){
				j = (j + 1) % type[i].length;
				if(judge(l,t,type[i][j])) break;
				else k--;
			}
			obj = type[i][j];
			break;
		case 39:
			if(judge(l + 1,t,obj)) l++;
			break;
		case 40:
			interval = 1;
			setTimeout(function(){
				interval = 1000;
			},150)
			break;
	}
	render()
},false);

var btn = document.getElementById("can");
//监听事件
//左滑动
btn.addEventListener("swipeleft",function () {
  if(judge(l - 1,t,obj)) l--;
});

//右滑动
btn.addEventListener("swiperight",function () {
 if(judge(l + 1,t,obj)) l++;
});

//上滑动
btn.addEventListener("swipeup",function () {
  var k = type[i].length;
			while(k){
				j = (j + 1) % type[i].length;
				if(judge(l,t,type[i][j])) break;
				else k--;
			}
			obj = type[i][j];
});

//下滑动
btn.addEventListener("swipedown",function () {
	interval = 1;
	setTimeout(function(){
		interval = 1000;
	},150)
});

window.addEventListener("keyup",function(){
	interval = 1000;
},false);

function judge(l,t,obj){
	if(l < 0 || l + obj[0].length > 10 || t + obj.length > 20) return false;

	for(var i = 0;i < obj.length;i++){
		if(t + i < 0) continue;
		for(var j = 0;j < obj[i].length;j++){
			if(obj[i][j] + box[t + i][l + j] == 2){
				return false;
			}
		}
	}

	return true;
}

function render(){
	txt.save();

	txt.fillStyle = "#000";
	txt.fillRect(0,0,width,height);

	txt.strokeStyle = "#000";
	txt.fillStyle = "#fff";

	for(var i = 0;i < box.length;i++){
		for(var j = 0;j < box[i].length;j++){
			if(box[i][j] == 1){
				txt.strokeRect(j * d,i * d,d,d);
				txt.fillRect(j * d + 1,i * d + 1,d - 2,d - 2);
			}
		}
	}

	for(var i = 0;i < obj.length;i++){
		for(var j = 0;j < obj[i].length;j++){
			if(obj[i][j] == 1){
				txt.strokeRect((l + j) * d,(t + i) * d,d,d);
				txt.fillRect((l + j) * d + 1,(t + i) * d + 1,d - 2,d -2);
			}
		}
	}

	txt.restore();
}
</script>
</html>